import React, { useState } from'react';
import { useNavigate } from 'react-router-dom';
const itemsData = [
  {
    date: '7月8日',
    time: '20:00',
    status: '进行中',
    name: '简约性冷淡风格时钟圆',
    redeemedCount: '233人已兑换',
    price: '200币',
    originalPrice: '250-',
    progress: '64%',
    imageUrl: 'https://img2.baidu.com/it/u=2095022025,1031125353&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
  },
  {
    date: '7月9日',
    time: '20:00',
    status: '进行中',
    name: '夏季清凉风扇桌面小功率',
    redeemedCount: '233人已兑换',
    price: '255币',
    originalPrice: '325-',
    progress: '85%',
    imageUrl: 'https://img0.baidu.com/it/u=1994436871,3895204449&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
  },
  {
    date: '7月10日',
    time: '20:00',
    status: '进行中',
    name: '拍照神奇水晶球纯手工打磨',
    redeemedCount: '233人已兑换',
    price: '100币',
    originalPrice: '125-',
    progress: '78%',
    imageUrl: 'https://img1.baidu.com/it/u=1233618609,2773105882&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'
  },
  {
    date: '7月8日',
    time: '20:00',
    status: '进行中',
    name: '简约性冷淡风格时钟圆',
    redeemedCount: '233人已兑换',
    price: '200币',
    originalPrice: '250-',
    progress: '64%',
    imageUrl: 'https://img2.baidu.com/it/u=2095022025,1031125353&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
  },
  {
    date: '7月9日',
    time: '20:00',
    status: '进行中',
    name: '夏季清凉风扇桌面小功率',
    redeemedCount: '233人已兑换',
    price: '255币',
    originalPrice: '325-',
    progress: '85%',
    imageUrl: 'https://img0.baidu.com/it/u=1994436871,3895204449&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
  }
];

const Item = ({ item }) => {
    const navigate = useNavigate();
  return (
    
    <div style={{ border: '1px solid #ddd', padding: '10px', marginBottom: '10px' }}>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <img src={item.imageUrl} alt={item.name} style={{ width: '80px', height: '80px', marginRight: '10px' }} onClick={()=> navigate('/xiang')}/>
        <div>
          <p>{item.name}</p>
          <p>{item.redeemedCount}</p>
          <p style={{ color:'red', fontWeight: 'bold' }}>{item.price}</p>
          <p style={{ textDecoration: 'line-through', color: 'gray' }}>{item.originalPrice}</p>
          <p>已兑{item.progress}</p>
          <button style={{ backgroundColor: 'rgb(255, 94, 129', color: 'white', border: 'none', padding: '5px 10px', borderRadius: '5px' }}>马上兑</button>
        </div>
      </div>
    </div>
  );
};

const App = () => {
    const navigate = useNavigate();
  const [selectedTime, setSelectedTime] = useState('');


  const filteredItems = itemsData.filter((item) => {
    return item.date +'' + item.time === selectedTime;
  });

  const handleTimeClick = (time) => {
    setSelectedTime(time);
  };

  return (
    <div>
        <h2 onClick={() => navigate('/')}>限时兑换</h2>
      <div style={{ display: 'flex', justifyContent: 'space-between', backgroundColor: '#e6f7ff', padding: '10px' }}>
        {itemsData.map((item, index) => (
          <div
            key={index}
            style={{ cursor: 'pointer' }}
            onClick={() => handleTimeClick(item.date +'' + item.time)}
          >
            <p>{item.date}</p>
            <p>{item.time}</p>
            <p style={{ color: item.status === '进行中'? 'blue' : 'gray' }}>{item.status}</p>
          </div>
        ))}
      </div>
      {filteredItems.map((item, index) => (
        <Item key={index} item={item} />
      ))}
    </div>
  );
};

export default App;